<template>
  <div class="add-card">
    <header class="add-header">
      <el-page-header content="查看详情" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">车辆信息</div>
        <el-divider />
        <div class="form">
          <el-form ref="carInfo" :model="carInfoForm" label-width="100px">
            <el-form-item label="车主姓名:" prop="personName">
              <span>{{ carInfoForm.personName }}</span>
            </el-form-item>
            <el-form-item label="联系方式:" prop="phoneNumber">
              <span>{{ carInfoForm.phoneNumber }}</span>
            </el-form-item>
            <el-form-item label="车辆号码:" prop="carNumber">
              <span>{{ carInfoForm.carNumber }}</span>
            </el-form-item>
            <el-form-item label="车辆品牌:" prop="carBrand">
              <span>{{ carInfoForm.carBrand }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="form-container">
        <div class="title">月卡缴费记录</div>
        <div class="form">
          <el-table
            :data="carInfoForm.rechargeList"
            style="width: 100%"
            :header-cell-style="headerStyle"
            class="no-inner-border"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
            />
            <el-table-column
              label="有效时间"
            >
              <template #default="{row}">
                {{ row.cardStartDate }} 至 {{ row.cardEndDate }}
              </template>
            </el-table-column>
            <el-table-column
              label="支付金额"
              width="100"
              prop="paymentAmount"
            />
            <el-table-column
              label="支付方式"
              prop="paymentMethod"
              width="200"
            >
              <template #default="{row}">
                {{ payMethodList[row.paymentMethod] }}
              </template>

            </el-table-column>
            <el-table-column
              prop="createTime"
              label="办理时间"
            />
            <el-table-column
              width="100"
              prop="createUser"
              label="办理人"
            />
          </el-table></div>
      </div>

    </main>
  </div>
</template>

<script>
import { CardDetailAPI } from '@/apis/car'
export default {
  data() {
    return {
      headerStyle: {
        backgroundColor: '#fafafa', /* 绿色背景 */
        fontWeight: 'bold'
      },
      // 车辆信息表单
      carInfoForm: {
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号码
        carBrand: '', // 车辆品牌,
        rechargeList: []// 充值记录
      },
      // 支付方式列表
      payMethodList:
        {
          'Alipay': '支付宝',
          'WeChat': '微信',
          'Cash': '线下'
        }

    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  }, created() {
    // 只有在有 id 编辑情况下再请求详情数据
    if (this.id) { this.getDetail() }
  },
  methods: {
    // 获取月卡详情数据
    async getDetail() {
      const res = await CardDetailAPI(this.id)
      console.log(res)
      // 回填车辆信息表单
      // const { carInfoId, personName, phoneNumber, carNumber, carBrand } = res.data
      // this.carInfoForm = {
      //   personName, phoneNumber, carNumber, carBrand, carInfoId
      // }
      // 场景：数据回显
      // 前提：你的属性名和res数据对象属性名一致才能这样玩
      for (const key in this.carInfoForm) { this.carInfoForm[key] = res.data[key] }
    }
  }
}
</script>

    <style scoped lang="scss">
    .add-card {
      background-color: #f4f6f8;
      height: 100vh;

      .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
          span {
            margin-right: 4px;
          }
          .arrow{
            cursor: pointer;
          }
        }

        .right {
          text-align: right;
        }
      }

      .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
          background-color: #fff;

          .title {
            height: 60px;
            line-height: 60px;
            padding-left: 20px;
          }

          .form {
            margin-bottom: 20px;
            padding: 20px 65px 24px;

            .el-form {
              display: flex;
              flex-wrap: wrap;

              .el-form-item {
                width: 50%;
              }
            }
          }
        }
        .preview{
          img{
            width: 100px;
          }
        }
      }
      ::v-deep .no-inner-border td {
        border: none;
      }

    }
    </style>
